
<template>
	<div id="com-container">
		<div class="com-chart" ref="trend_ref">

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				chartInstance: null,
				allData: null//服务器返回的数据
			
			}

		},
		mounted() {
			this.initChart()
			this.getData()
			//屏幕监听事件
			window.addEventListener('resize', this.screenAdapter)
			//在页面加载完成的时候 主动进行屏幕的适配
			this.screenAdapter()

		},
		destroyed() {
			window.removeEventListener('resize',this.screenAdapter)
		},
		methods: {
			//初始化echarInstance对象
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.trend_ref) //第二个参数主题的使用
				//对图表初始化配置的控制
				const initOption = {
					
				}
				//可以多次设置setOption  它是相互整合的过程  不会覆盖之前的设置
				this.chartInstance.setOption(initOption)
				
				
			},
			// 获取服务器的数据
			async getData() {
				// http://127.0.0.1:8000/api/seller
				const {
					data: ret
				} = await this.$http.get('trend')
				
				this.allData = ret
				this.updateChart()
				
			},
			//更新图表
			updateChart() {
				const dataOption = { //因为前面都配置过 这里只对数据行配置 
					
				}
				this.chartInstance.setOption(dataOption)

			},
			screenAdapter() { //屏幕适配  当浏览器发生变化时 图表也随之改变
				const adapterOption = { //屏幕适配相关的一些配置
					
				}
				this.chartInstance.setOption(adapterOption)

				//手动调用图表对象的resize  才能产生效果
				this.chartInstance.resize()
			}

		}
	}
</script>

<style scoped="scoped">
</style>
